<template>
  <div style="padding: 10px">
    <a-row :gutter="24">
      <a-col :span="24">

        <a-card>

          <span style="margin-right: 10px">数据范围:</span>
          <a-select v-model:value="value2" size="default" style="width: 200px;margin-right: 30px"
            :options="options2"></a-select>

          <span style="margin-right: 10px">日期范围:</span>
          <a-select v-model:value="value1" size="default" style="width: 60px;" :options="options"></a-select>
          <a-range-picker v-model:value="value3" />



        </a-card>
      </a-col>
    </a-row>
  </div>

  <div style="padding: 10px">
    <a-row :gutter="24">
      <a-col :span="4">
        <a-card>
          <a-statistic title="订单总额（元）" :value="1155.28" :precision="2" :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic title="未付金额（元）" :value="1155.28" :precision="2" :value-style="{ color: '#cf1322' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic title="已付金额（元）" :value="1500" :precision="2" :value-style="{ color: '#3f8600' }">
            <!-- <template #suffix>
            <span style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">同比</span> <br/>
          </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic title="金额产生率" :value="70" :precision="2" suffix="%" class="demo-class"
            :value-style="{ color: 'green' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic title="订单付款率" :value="75" :precision="2" suffix="%" class="demo-class"
            :value-style="{ color: '#cf1322' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic title="未付款占比" :value="9.3" :precision="2" suffix="%" class="demo-class"
            :value-style="{ color: '#cf1322' }">
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>



  <div style="padding: 10px">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card title="费用排名" style="height:400px;font-family:'Gill Sans'">
          <template #extra>
            <div>
              <a-radio-group v-model:value="radioValue1" button-style="solid">
                <a-radio-button value="0">总金额</a-radio-button>
                <a-radio-button value="1">未付金额</a-radio-button>
                <a-radio-button value="2">已付金额</a-radio-button>
              </a-radio-group>
            </div>
          </template>

          <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id">
            <template #onYearOnYearBasis="{ text }">
              <CaretUpOutlined style="color:#00e18d" v-if="text > 0" />
              <CaretDownOutlined style="color:#ff7b7b" v-if="text < 0" />
              {{ text < 0 ? text * -1 : text }} </template>
                <template #linkRelativeRatio="{ text }">
                  <CaretUpOutlined style="color:#00e18d" v-if="text > 0" />
                  <CaretDownOutlined style="color:#ff7b7b" v-if="text < 0" />
                  {{ text < 0 ? text * -1 : text }} </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card id="card-pay" title="付费方式分析" style="height:400px;">
        </a-card>
      </a-col>
    </a-row>
  </div>


  <div style="padding: 10px">
    <a-row :gutter="24">
      <a-col :span="24">
        <a-card id="card-price" title="费用趋势分析" style="height:400px;">
        </a-card>
      </a-col>
    </a-row>
  </div>

</template>
<script lang="ts">
import { ArrowUpOutlined, ArrowDownOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';
import ARow from 'ant-design-vue/lib/grid/Row';
import { defineComponent } from 'vue';
import moment, { Moment } from 'moment';

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;


export default defineComponent({
  components: {
    ArrowUpOutlined,
    ArrowDownOutlined,
    CaretDownOutlined,
    CaretUpOutlined
  },
  setup() {

    const optionsValue = new Array<{ value: any, label: any }>();
    optionsValue.push({ 'value': 1, "label": "日", })
    optionsValue.push({ 'value': 2, "label": "月", })
    optionsValue.push({ 'value': 3, "label": "年", })




    const optionsValue2 = new Array<{ value: any, label: any }>();
    optionsValue2.push({ 'value': 1, "label": "全部机构", })
    optionsValue2.push({ 'value': 2, "label": "华厦汇城", })

    const dateRange = ref<Moment[]>();
    const dateFormat = 'YYYY/MM/DD';
    const monthFormat = 'YYYY/MM';
    const yearFormat = 'YYYY';


    const radioValue1 = ref<string>('0');;


    const columns = [
      {
        title: '机构名称',
        dataIndex: 'organizationUnitName',
        key: 'organizationUnitName',
      },
      {
        title: '金额',
        dataIndex: 'price',
        key: 'price',
      },
      {
        title: '同比',
        dataIndex: 'onYearOnYearBasis',
        key: 'onYearOnYearBasis',
        slots: { customRender: 'onYearOnYearBasis' }
      },
      {
        title: '环比',
        dataIndex: 'linkRelativeRatio',
        key: 'linkRelativeRatio',
        slots: { customRender: 'linkRelativeRatio' }
      },
    ];
    const data = [
      {
        id: '1',
        organizationUnitName: '华厦汇城',
        price: 13755,
        onYearOnYearBasis: '20',
        linkRelativeRatio: '40',
      },
      {
        id: '2',
        organizationUnitName: '广西城投',
        price: 34923,
        onYearOnYearBasis: '-30',
        linkRelativeRatio: '-40',
      },
      {
        id: '3',
        organizationUnitName: '贵阳停车',
        price: 34923,
        onYearOnYearBasis: '-30',
        linkRelativeRatio: '40',
      },
      {
        id: '4',
        organizationUnitName: '天府停车',
        price: 34923,
        onYearOnYearBasis: '40',
        linkRelativeRatio: '-30',
      }
    ];

    var option: EChartsOption;

    var option2: EChartsOption;


    onMounted(() => {

      //获取卡片内容div 并设置id 
      document.getElementById('card-pay').getElementsByClassName('ant-card-body')[0].id = 'xxx';

      //设置div的样式
      var xx = document.getElementById('xxx');
      xx.style.height = "340px";
      xx.style.width ='100%';
      xx.style.padding = '0'      
      xx.style.display = 'flex';
      xx.style.justifyContent = 'center';
      xx.style.alignItems = 'center';

      //初始化图标到div中
      var myChart = echarts.init(xx,null,{

      });

      option = {
        series: [
          {
            type: 'treemap',            
            data: [
              {
                name: '微信支付', // First tree
                value: 60
              },
              {
                name: '支付宝支付', // First tree
                value: 20
              },
              {
                name: '余额支付', // First tree
                value: 20
              }
            ]
          }
        ]
      };

      
      window.onresize = function () {
        myChart.resize();
      };

      option && myChart.setOption(option);

    
      //获取卡片内容div 并设置id 
      document.getElementById('card-price').getElementsByClassName('ant-card-body')[0].id = 'price';

      //设置div的样式
      var price = document.getElementById('price');
      price.style.height = "340px";
      price.style.width ='100%';
      price.style.padding = '0'      
      price.style.display = 'flex';
      price.style.justifyContent = 'center';
      price.style.alignItems = 'center';

      var myChart2 = echarts.init(price);

      option2 = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              toolbox: {
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              legend: {
                data: ['总金额', '已收金额', '未收金额']
              },
              xAxis: [
                {
                  type: 'category',
                  data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12'],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '金额',
                  axisLabel: {
                    formatter: '{value} 元'
                  }
                }
              ],
              series: [
                {
                  name: '总金额',
                  type: 'bar',
                  tooltip: {
                    valueFormatter: function (value) {
                      return (value as number) + '元';
                    }
                  },
                  data: [
                    60.0, 54.9, 47.0, 23.2, 25.6, 76.79, 135.6, 162.2, 342.6, 250.0, 66.4,666
                  ]
                },
                {
                  name: '已收金额',
                  type: 'line',
                  tooltip: {
                    valueFormatter: function (value) {
                      return (value as number) + '元';
                    }
                  },
                  data: [
                    30.0, 24.9, 27.0, 13.2, 15.6, 36.79, 35.6, 62.2, 42.6, 150.0, 36.4,505
                  ]
                },
                {
                  name: '未收金额',
                  type: 'line',
                  tooltip: {
                    valueFormatter: function (value) {
                      return (value as number) + '元';
                    }
                  },
                  data: [
                    30.0, 34.9, 20.0, 3.2, 5.6, 26.79, 15.6, 42.2, 22.6, 50.0, 26.4,100 
                  ]
                }
              ]
            };

        option2 && myChart2.setOption(option2);
    })

    return {
      value3: ref<Moment[]>([moment('2022年12月14日', dateFormat), moment('2022年12月14日', dateFormat)]),
      value1: optionsValue[0].label,
      value2: optionsValue2[0].label,
      options: optionsValue,
      options2: optionsValue2,
      columns,
      data,
      radioValue1
    };
  },
});
</script>

<style>
#card-pay .ant-card-body{
  /* background-color:black; */
}
</style>
